Frontend Micro-Frontend: Ovládnutie architektúry Module Federation

V dnešnom rýchlo sa vyvíjajúcom prostredí webového vývoja môže byť budovanie a údržba rozsiahlych frontend aplikácií čoraz zložitejšie. Tradičné monolitické architektúry často vedú k problémom, ako je nafúknutý kód, pomalé časy zostavovania a ťažkosti s nezávislým nasadzovaním. Micro-frontendy ponúkajú riešenie rozdelením frontendu na menšie, lepšie spravovateľné časti. Tento článok sa zaoberá Module Federation, výkonnou technikou na implementáciu micro-frontendov, skúma jej výhody, architektúru a praktické implementačné stratégie.

Čo sú Micro-Frontendy?

Micro-frontendy sú architektonický štýl, kde je frontend aplikácia rozdelená na menšie, nezávislé a nasaditeľné jednotky. Každý micro-frontend zvyčajne vlastní samostatný tím, čo umožňuje väčšiu autonómiu a rýchlejšie vývojové cykly. Tento prístup odráža architektúru mikroservisov bežne používanú na backende.

Kľúčové charakteristiky micro-frontendov zahŕňajú:

• Nezávislé nasadenie: Každý micro-frontend je možné nasadiť nezávisle bez ovplyvnenia iných častí aplikácie.
• Autonómia tímu: Rôzne tímy môžu vlastniť a vyvíjať rôzne micro-frontendy pomocou svojich preferovaných technológií a pracovných postupov.
• Technologická diverzita: Micro-frontendy je možné vytvárať pomocou rôznych frameworkov a knižníc, čo tímom umožňuje vybrať si najlepšie nástroje pre danú úlohu.
• Izolácia: Micro-frontendy by mali byť navzájom izolované, aby sa zabránilo kaskádovým zlyhaniam a zabezpečila sa stabilita.

Prečo používať Micro-Frontendy?

Použitie architektúry micro-frontendov ponúka niekoľko významných výhod, najmä pre rozsiahle a komplexné aplikácie:

• Vylepšená škálovateľnosť: Rozdelenie frontendu na menšie jednotky uľahčuje škálovanie aplikácie podľa potreby.
• Rýchlejšie vývojové cykly: Nezávislé tímy môžu pracovať paralelne, čo vedie k rýchlejšiemu vývoju a cyklom vydávania.
• Zvýšená autonómia tímu: Tímy majú väčšiu kontrolu nad svojim kódom a môžu sa rozhodovať nezávisle.
• Jednoduchšia údržba: Menšie kódové základne sa ľahšie udržiavajú a ladia.
• Technologicky agnostické: Tímy si môžu vybrať najlepšie technológie pre svoje špecifické potreby, čo umožňuje inovácie a experimentovanie.
• Znížené riziko: Nasadenia sú menšie a častejšie, čo znižuje riziko rozsiahlych zlyhaní.

Úvod do Module Federation

Module Federation je funkcia zavedená vo Webpack 5, ktorá umožňuje aplikáciám JavaScript dynamicky načítať kód z iných aplikácií za behu. To umožňuje vytvárať skutočne nezávislé a skladateľné micro-frontendy. Namiesto toho, aby sa všetko zostavovalo do jedného balíka, Module Federation umožňuje rôznym aplikáciám zdieľať a používať moduly iných aplikácií, akoby išlo o lokálne závislosti.

Na rozdiel od tradičných prístupov k micro-frontendom, ktoré sa spoliehajú na iframes alebo webové komponenty, Module Federation poskytuje pre používateľa plynulejší a integrovanejší zážitok. Vyhýba sa réžii výkonu a zložitosti spojenej s týmito inými technikami.

Ako funguje Module Federation

Module Federation funguje na koncepte „vystavovania“ a „spotrebovávania“ modulov. Jedna aplikácia („hostiteľ“ alebo „kontajner“) môže vystavovať moduly, zatiaľ čo iné aplikácie („remote“) môžu tieto vystavené moduly spotrebovávať. Tu je rozpis procesu:

1. Vystavenie modulu: Micro-frontend, nakonfigurovaný ako aplikácia „remote“ vo Webpacku, vystavuje určité moduly (komponenty, funkcie, nástroje) prostredníctvom konfiguračného súboru. Táto konfigurácia špecifikuje moduly, ktoré sa majú zdieľať, a ich príslušné vstupné body.
2. Spotreba modulu: Ďalší micro-frontend, nakonfigurovaný ako aplikácia „host“ alebo „kontajner“, deklaruje aplikáciu remote ako závislosť. Špecifikuje adresu URL, kde sa nachádza manifest federácie modulu remote (malý súbor JSON popisujúci vystavené moduly).
3. Rozlíšenie za behu: Keď hostiteľská aplikácia potrebuje použiť modul z aplikácie remote, dynamicky načíta manifest federácie modulu remote. Webpack potom rozlíši závislosť modulu a načíta požadovaný kód z aplikácie remote za behu.
4. Zdieľanie kódu: Module Federation tiež umožňuje zdieľanie kódu medzi hostiteľskou a remote aplikáciou. Ak obe aplikácie používajú rovnakú verziu zdieľanej závislosti (napr. React, lodash), kód sa bude zdieľať, čím sa zabráni duplicite a zníži sa veľkosť balíkov.

Nastavenie Module Federation: Praktický príklad

Poďme si ilustrovať Module Federation na jednoduchom príklade zahŕňajúcom dva micro-frontendy: "Katalóg produktov" a "Nákupný košík". Katalóg produktov vystaví komponent zoznamu produktov, ktorý Nákupný košík spotrebuje na zobrazenie súvisiacich produktov.

Štruktúra projektu

  
  micro-frontend-example/
    product-catalog/
      src/
        components/
          ProductList.jsx
        index.js
        webpack.config.js
    shopping-cart/
      src/
        components/
          RelatedProducts.jsx
        index.js
        webpack.config.js
  

Katalóg produktov (Remote)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'product_catalog',
        filename: 'remoteEntry.js',
        exposes: {
          './ProductList': './src/components/ProductList',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Vysvetlenie:

• name: Jedinečný názov aplikácie remote.
• filename: Názov vstupného bodu, ktorý bude vystavený. Tento súbor obsahuje manifest federácie modulu.
• exposes: Definuje, ktoré moduly budú vystavené touto aplikáciou. V tomto prípade vystavujeme komponent `ProductList` zo `src/components/ProductList.jsx` pod názvom `./ProductList`.
• shared: Špecifikuje závislosti, ktoré by sa mali zdieľať medzi hostiteľskou a remote aplikáciou. Je to rozhodujúce pre zabránenie duplicitnému kódu a zabezpečenie kompatibility. `singleton: true` zaisťuje, že sa načíta iba jedna inštancia zdieľanej závislosti. `eager: true` načíta zdieľanú závislosť hneď na začiatku, čo môže zlepšiť výkon. `requiredVersion` definuje prijateľný rozsah verzií pre zdieľanú závislosť.

src/components/ProductList.jsx

  
  import React from 'react';

  const ProductList = ({ products }) => (
    

      {products.map((product) => (
        
{product.name} - ${product.price}
      ))}
    
  );

  export default ProductList;
  

Nákupný košík (Host)

webpack.config.js

  
  const { ModuleFederationPlugin } = require('webpack').container;
  const path = require('path');

  module.exports = {
    // ... other webpack configurations
    plugins: [
      new ModuleFederationPlugin({
        name: 'shopping_cart',
        remotes: {
          product_catalog: 'product_catalog@http://localhost:3001/remoteEntry.js',
        },
        shared: {
          react: { singleton: true, eager: true, requiredVersion: '^17.0.0' },
          'react-dom': { singleton: true, eager: true, requiredVersion: '^17.0.0' },
        },
      }),
    ],
  };
  

Vysvetlenie:

• name: Jedinečný názov hostiteľskej aplikácie.
• remotes: Definuje remote aplikácie, z ktorých bude táto aplikácia spotrebovávať moduly. V tomto prípade deklarujeme remote s názvom `product_catalog` a špecifikujeme adresu URL, kde sa nachádza jeho súbor `remoteEntry.js`. Formát je `remoteName: 'remoteName@remoteEntryUrl'`.
• shared: Podobne ako v prípade remote aplikácie, aj hostiteľská aplikácia definuje svoje zdieľané závislosti. Tým sa zabezpečí, že hostiteľská a remote aplikácia používajú kompatibilné verzie zdieľaných knižníc.

src/components/RelatedProducts.jsx

  
  import React, { useEffect, useState } from 'react';
  import ProductList from 'product_catalog/ProductList';

  const RelatedProducts = () => {
    const [products, setProducts] = useState([]);

    useEffect(() => {
      // Fetch related products data (e.g., from an API)
      const fetchProducts = async () => {
        // Replace with your actual API endpoint
        const response = await fetch('https://fakestoreapi.com/products?limit=3');
        const data = await response.json();
        setProducts(data);
      };

      fetchProducts();
    }, []);

    return (
      

        
Súvisiace produkty
        {products.length > 0 ?  : 
Načítava sa...
}
      
    );
  };

  export default RelatedProducts;
  

Vysvetlenie:

• import ProductList from 'product_catalog/ProductList'; Tento riadok importuje komponent `ProductList` z `product_catalog` remote. Syntax `remoteName/moduleName` hovorí Webpacku, aby načítal modul zo špecifikovanej remote aplikácie.
• Komponent potom používa importovaný komponent `ProductList` na zobrazenie súvisiacich produktov.

Spustenie príkladu

1. Spustite aplikácie Katalóg produktov aj Nákupný košík pomocou ich príslušných vývojových serverov (napr. `npm start`). Uistite sa, že bežia na rôznych portoch (napr. Katalóg produktov na porte 3001 a Nákupný košík na porte 3000).
2. Prejdite do aplikácie Nákupný košík vo svojom prehliadači.
3. Mali by ste vidieť sekciu Súvisiace produkty, ktorá sa vykresľuje pomocou komponentu `ProductList` z aplikácie Katalóg produktov.

Pokročilé koncepty Module Federation

Okrem základného nastavenia ponúka Module Federation niekoľko pokročilých funkcií, ktoré môžu vylepšiť vašu architektúru micro-frontendov:

Zdieľanie kódu a správa verzií

Ako je znázornené v príklade, Module Federation umožňuje zdieľanie kódu medzi hostiteľskou a remote aplikáciou. Dosahuje sa to prostredníctvom konfiguračnej možnosti `shared` vo Webpacku. Zadaním zdieľaných závislostí sa môžete vyhnúť duplicitnému kódu a znížiť veľkosť balíkov. Správna správa verzií zdieľaných závislostí je rozhodujúca pre zabezpečenie kompatibility a zabránenie konfliktom. Sémantické verzovanie (SemVer) je široko používaný štandard pre verzovanie softvéru, ktorý vám umožňuje definovať kompatibilné rozsahy verzií (napr. `^17.0.0` umožňuje akúkoľvek verziu väčšiu alebo rovnú 17.0.0, ale menšiu ako 18.0.0).

Dynamické Remotes

V predchádzajúcom príklade bola adresa URL remote napevno zakódovaná v súbore `webpack.config.js`. V mnohých reálnych scenároch však možno budete musieť dynamicky určiť adresu URL remote za behu. Dá sa to dosiahnuť pomocou konfigurácie remote založenej na prísľube:

  
  // webpack.config.js
  remotes: {
    product_catalog: new Promise(resolve => {
      // Fetch the remote URL from a configuration file or API
      fetch('/config.json')
        .then(response => response.json())
        .then(config => {
          const remoteUrl = config.productCatalogUrl;
          resolve(`product_catalog@${remoteUrl}/remoteEntry.js`);
        });
    }),
  },
  

To vám umožňuje nakonfigurovať adresu URL remote na základe prostredia (napr. vývoj, staging, produkcia) alebo iných faktorov.

Asynchrónne načítanie modulov

Module Federation podporuje asynchrónne načítanie modulov, čo vám umožňuje načítať moduly na požiadanie. To môže zlepšiť počiatočný čas načítania vašej aplikácie odložením načítania nekritických modulov.

  
  // RelatedProducts.jsx
  import React, { Suspense, lazy } from 'react';

  const ProductList = lazy(() => import('product_catalog/ProductList'));

  const RelatedProducts = () => {
    return (
      

        
Súvisiace produkty
        Načítava sa...
}>
          
        
      
    );
  };
  

Pomocou `React.lazy` a `Suspense` môžete asynchrónne načítať komponent `ProductList` z remote aplikácie. Komponent `Suspense` poskytuje náhradné používateľské rozhranie (napr. indikátor načítania), zatiaľ čo sa modul načítava.

Federované štýly a aktíva

Module Federation sa dá použiť aj na zdieľanie štýlov a aktív medzi micro-frontendami. To môže pomôcť udržať konzistentný vzhľad a dojem v celej vašej aplikácii.

Ak chcete zdieľať štýly, môžete vystaviť moduly CSS alebo štýlované komponenty z remote aplikácie. Ak chcete zdieľať aktíva (napr. obrázky, písma), môžete nakonfigurovať Webpack tak, aby skopíroval aktíva do zdieľaného umiestnenia a potom na ne odkazoval z hostiteľskej aplikácie.

Osvedčené postupy pre Module Federation

Pri implementácii Module Federation je dôležité dodržiavať osvedčené postupy na zabezpečenie úspešnej a udržiavateľnej architektúry:

• Definujte jasné hranice: Jasne definujte hranice medzi micro-frontendami, aby ste sa vyhli úzkemu prepojeniu a zabezpečili nezávislé nasadenie.
• Stanovte komunikačné protokoly: Definujte jasné komunikačné protokoly medzi micro-frontendami. Zvážte použitie zberníc udalostí, knižníc správy zdieľaného stavu alebo vlastných rozhraní API.
• Starostlivo spravujte zdieľané závislosti: Starostlivo spravujte zdieľané závislosti, aby ste sa vyhli konfliktom verzií a zabezpečili kompatibilitu. Používajte sémantické verzovanie a zvážte použitie nástroja na správu závislostí, ako je npm alebo yarn.
• Implementujte robustnú manipuláciu s chybami: Implementujte robustnú manipuláciu s chybami, aby ste zabránili kaskádovým zlyhaniam a zabezpečili stabilitu vašej aplikácie.
• Monitorujte výkon: Monitorujte výkon svojich micro-frontendov, aby ste identifikovali úzke miesta a optimalizovali výkon.
• Automatizujte nasadenia: Automatizujte proces nasadenia, aby ste zabezpečili konzistentné a spoľahlivé nasadenia.
• Používajte konzistentný štýl kódovania: Vynúťte konzistentný štýl kódovania vo všetkých micro-frontendoch, aby ste zlepšili čitateľnosť a udržiavateľnosť. Nástroje ako ESLint a Prettier vám s tým môžu pomôcť.
• Dokumentujte svoju architektúru: Dokumentujte svoju architektúru micro-frontendov, aby ste zabezpečili, že všetci členovia tímu rozumejú systému a jeho fungovaniu.

Module Federation vs. Iné prístupy k Micro-Frontendom

Zatiaľ čo Module Federation je výkonná technika na implementáciu micro-frontendov, nie je to jediný prístup. Medzi ďalšie populárne metódy patria:

• Iframes: Iframes poskytujú silnú izoláciu medzi micro-frontendami, ale môže byť ťažké ich bezproblémovo integrovať a môžu mať réžiu výkonu.
• Webové komponenty: Webové komponenty vám umožňujú vytvárať opakovane použiteľné prvky používateľského rozhrania, ktoré sa dajú použiť v rôznych micro-frontendoch. Môže byť však zložitejšie ich implementovať ako Module Federation.
• Integrácia za behu zostavovania: Tento prístup zahŕňa zostavenie všetkých micro-frontendov do jednej aplikácie za behu zostavovania. Aj keď to môže zjednodušiť nasadenie, znižuje to autonómiu tímu a zvyšuje riziko konfliktov.
• Single-SPA: Single-SPA je framework, ktorý vám umožňuje kombinovať viacero jednostránkových aplikácií do jednej aplikácie. Poskytuje flexibilnejší prístup ako integrácia za behu zostavovania, ale môže byť zložitejší na nastavenie.

Výber prístupu, ktorý sa má použiť, závisí od špecifických požiadaviek vašej aplikácie a od veľkosti a štruktúry vášho tímu. Module Federation ponúka dobrú rovnováhu medzi flexibilitou, výkonom a jednoduchosťou použitia, vďaka čomu je populárnou voľbou pre mnohé projekty.

Príklady Module Federation v reálnom svete

Hoci sú špecifické implementácie spoločností často dôverné, všeobecné princípy Module Federation sa uplatňujú v rôznych odvetviach a scenároch. Tu je niekoľko potenciálnych príkladov:

• Platformy elektronického obchodu: Platforma elektronického obchodu by mohla použiť Module Federation na oddelenie rôznych sekcií webovej stránky, ako sú katalóg produktov, nákupný košík, proces platby a správa používateľských účtov, do samostatných micro-frontendov. To umožňuje rôznym tímom pracovať na týchto sekciách nezávisle a nasadzovať aktualizácie bez ovplyvnenia zvyšku platformy. Napríklad tím v *Nemecku* by sa mohol zamerať na katalóg produktov, zatiaľ čo tím v *Indii* spravuje nákupný košík.
• Aplikácie finančných služieb: Aplikácia finančných služieb by mohla použiť Module Federation na izoláciu citlivých funkcií, ako sú obchodné platformy a správa účtov, do samostatných micro-frontendov. To zvyšuje bezpečnosť a umožňuje nezávislý audit týchto kritických komponentov. Predstavte si tím v *Londýne* so špecializáciou na funkcie obchodnej platformy a ďalší tím v *New Yorku*, ktorý spravuje správu účtov.
• Systémy na správu obsahu (CMS): CMS by mohol použiť Module Federation, aby vývojárom umožnil vytvárať a nasadzovať vlastné moduly ako micro-frontendy. To umožňuje väčšiu flexibilitu a prispôsobenie pre používateľov CMS. Tím v *Japonsku* by mohol vytvoriť špecializovaný modul galérie obrázkov, zatiaľ čo tím v *Brazílii* vytvorí pokročilý textový editor.
• Aplikácie zdravotnej starostlivosti: Aplikácia zdravotnej starostlivosti by mohla použiť Module Federation na integráciu rôznych systémov, ako sú elektronické zdravotné záznamy (EHR), pacientske portály a fakturačné systémy, ako samostatné micro-frontendy. To zlepšuje interoperabilitu a umožňuje jednoduchšiu integráciu nových systémov. Napríklad tím v *Kanade* by mohol integrovať nový modul telemedicíny, zatiaľ čo tím v *Austrálii* sa zameriava na zlepšenie používateľského zážitku z pacientskeho portálu.

Záver

Module Federation poskytuje výkonný a flexibilný prístup k implementácii micro-frontendov. Tým, že umožňuje aplikáciám dynamicky načítať kód jedna od druhej za behu, umožňuje vytvárať skutočne nezávislé a skladateľné frontend architektúry. Hoci si vyžaduje starostlivé plánovanie a implementáciu, výhody zvýšenej škálovateľnosti, rýchlejších vývojových cyklov a väčšej autonómie tímu z neho robia presvedčivú voľbu pre rozsiahle a komplexné webové aplikácie. Keďže sa prostredie webového vývoja neustále vyvíja, Module Federation je pripravený zohrávať čoraz dôležitejšiu úlohu pri formovaní budúcnosti frontend architektúry.

Pochopením konceptov a osvedčených postupov uvedených v tomto článku môžete využiť Module Federation na budovanie škálovateľných, udržiavateľných a inovatívnych frontend aplikácií, ktoré spĺňajú požiadavky dnešného rýchleho digitálneho sveta.